<!--矿山登记表 mineSafeRpt-->
<template>
  <Layout>
    <Tabs value="name1" ref="tabs">
      <TabPane label="列表" name="name1">
        <div>
          <Form ref="queryForm" :model="dataToQuery" :label-width="160">
            <Row v-show="!switchFlag" class="query-form">
              <Col span="8">
                <FormItem label="企业名称：" prop="order">
                  <!--                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
                  <company-select v-model="dataToQuery.companyName" class="query-form-el"></company-select>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="填表时间：" prop="content">
                  <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange"
                              placement="bottom-end" placeholder="请选择查询时间段"
                              @on-change="onSelectQueryDateRange"></DatePicker>
                </FormItem>
              </Col>
              <Col span="8">
                <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                <Button @click="reset" class="ivu-btn-reset">重置</Button>
                <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
              </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
              <Col span="8">
                <FormItem label="企业名称：" prop="order">
                  <!--                        <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
                  <company-select v-model="dataToQuery.companyName" class="query-form-el"></company-select>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="填表时间：" prop="content">
                  <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange"
                              placement="bottom-end" placeholder="请选择查询时间段"
                              @on-change="onSelectQueryDateRange"></DatePicker>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="采矿许可证编号：" prop="mineLicenceNum">
                  <Input v-model='dataToQuery.mineLicenceNum' class="query-form-el"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
              <Col span="8">
                <FormItem label="安全生产许可证编号：" prop="saLicenceNum">
                  <Input v-model='dataToQuery.saLicenceNum' class="query-form-el"></Input>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label='二级集团：' prop='twoLevelOrgId'>
                  <two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgId"></two-level-org>
                </FormItem>
              </Col>
              <Col span="8">
                <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                <Button @click="reset" class="ivu-btn-reset">重置</Button>
                <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
              </Col>
            </Row>
            <Row class="query-form">
              <Col span="24">
                <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
                <download-button :api="exportUrl" :queryForm="dataToQuery"/>
                <!-- <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button> -->
              </Col>
            </Row>
          </Form>
          <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!"
                 @on-selection-change='getSelectRows'
                 :loading='pageStatus.loading' :row-class-name="rowClassName"
                 border :columns="columns1" :data="dataTable" @on-sort-change="querySort">
          </Table>
          <Row style="margin-right:10px;">
            <Col span="24">
              <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                    @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                    show-elevator/>
            </Col>
          </Row>
        </div>
      </TabPane>
      <TabPane label="统计图" name="name2">
        <div style="display: flex;justify-content: space-around">
          <div ref="container" :style="{width:'40%',height: divHeight + 'px'}">
          </div>
          <div ref="container2" :style="{width:'40%',height: divHeight + 'px'}">
          </div>
        </div>
      </TabPane>
    </Tabs>
    <Modal title="矿山登记表" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=1100 :styles="{height:'1139px'}" class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?200:null"
                :label-position="mode === 'view'?'right':'top'">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='企业名称：' prop='companyId'>
                  <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                  <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName"
                                :orgTree="true" :currentOrgId="dataToView.companyId"
                                :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='所在地：' prop='companyAddress'>
                  <div v-if="mode === 'view'">{{ areaCodeToAreaName(dataToView.companyAddress) }}</div>
                  <Cascader v-else :data="tempAreaTree" v-model="dataToView.companyAddressArr" change-on-select
                            :transfer="true"
                            :load-data="areaTreeLoadData" :render-format="labels=>labels.join('·')" :clearable='false'
                            @on-change="(value,selectedData)=>{$set(dataToView,'companyAddress',value.join(','))}"></Cascader>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='采矿许可证编号：' prop='mineLicenceNum'>
                  <div v-if="mode === 'view'">{{ dataToView.mineLicenceNum }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.mineLicenceNum'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期起始时间：' prop='mineLicenceDateStart'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.mineLicenceDateStart) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%"
                              v-model='dataToView.mineLicenceDateStart'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='有效期截止时间：' prop='mineLicenceDateEnd'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.mineLicenceDateEnd) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%"
                              v-model='dataToView.mineLicenceDateEnd'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='安全生产许可证编号：' prop='saLicenceNum'>
                  <div v-if="mode === 'view'">{{ dataToView.saLicenceNum }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.saLicenceNum'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期起始时间：' prop='saLicenceDateStart'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.saLicenceDateStart) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.saLicenceDateStart'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='有效期截止时间：' prop='saLicenceDateEnd'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.saLicenceDateEnd) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.saLicenceDateEnd'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='投产日期：' prop='startDate'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.startDate) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%"
                              v-model='dataToView.startDate'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='矿山开采设计单位：' prop='mineDesignOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.mineDesignOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.mineDesignOrg'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='矿山安全标准化等级：' prop='saStandiadRank'>
                  <div v-if="mode === 'view'">{{ dataToView.saStandiadRank }}</div>
                  <Select v-else class='query-form-el' v-model="dataToView.saStandiadRank" label-in-value
                          @on-change="setSaStandiadRank"
                          @on-clear="setSaStandiadRank(null)">
                    <Option value="一级">一级</Option>
                    <Option value="二级">二级</Option>
                    <Option value="三级">三级</Option>
                    <Option value="未评定">未评定</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='矿区面积（平方公里）：' prop='mineArea'>
                  <div v-if="mode === 'view'">{{ dataToView.mineArea }}</div>
                  <InputNumber v-else class="query-form-el" v-model='dataToView.mineArea' :min="0"></InputNumber>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='保有储量：' prop='reserves'>
                  <div v-if="mode === 'view'">{{ dataToView.reserves }}</div>
                  <InputNumber v-else class="query-form-el" v-model='dataToView.reserves' :min="0"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='开采队伍情况：' prop='mineTeamTypeId'>
                  <div v-if="mode === 'view'">{{ dataToView.mineTeamType }}</div>
                  <Select v-else class='query-form-el' v-model="dataToView.mineTeamTypeId" label-in-value
                          @on-change="setMineTeamType"
                          @on-clear="setMineTeamType(null)">
                    <Option v-for="item in mineTeamTypeList" :value="item.codingCodeId" :key="item.codingCodeId">
                      {{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='承接矿山作业单位：' prop='contractor'>
                  <div v-if="mode === 'view'">{{ dataToView.contractor }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.contractor'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='安全生产许可证：' prop='saLicenceCoNum'>
                  <div v-if="mode === 'view'">{{ dataToView.saLicenceCoNum }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.saLicenceCoNum'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='许可范围：' prop='saLicenceCoRange'>
                  <div v-if="mode === 'view'">{{ dataToView.saLicenceCoRange }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.saLicenceCoRange'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='发证机关：' prop='saLicenceCoOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.saLicenceCoOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.saLicenceCoOrg'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期起始时间：' prop='saLicenceCoDateStart'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.saLicenceCoDateStart) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.saLicenceCoDateStart'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='有效期截至时间：' prop='saLicenceCoDateEnd'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.saLicenceCoDateEnd) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.saLicenceCoDateEnd'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='承包单位作业资质等级：' prop='coBizRank'>
                  <div v-if="mode === 'view'">{{ dataToView.coBizRank }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.coBizRank'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='发证机关：' prop='coBizOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.coBizOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.coBizOrg'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='有效期起始日期：' prop='coBizDateStart'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.coBizDateStart) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.coBizDateStart'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期截至时间：' prop='coBizDateEnd'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.coBizDateEnd) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.coBizDateEnd'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='年开采量（万吨）：' prop='yearMine'>
                  <div v-if="mode === 'view'">{{ dataToView.yearMine }}</div>
                  <InputNumber v-else class="query-form-el" v-model='dataToView.yearMine' :min="0"></InputNumber>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='排土场、库存量（万吨）：' prop='storeSoil'>
                  <div v-if="mode === 'view'">{{ dataToView.storeSoil }}</div>
                  <InputNumber v-else class="query-form-el" v-model='dataToView.storeSoil' :min="0"></InputNumber>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有无排土场安全评价资料：' prop='storeSoilDoc'>
                  <div v-if="mode === 'view'">{{ dataToView.storeSoilDoc }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.storeSoilDoc'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='爆破管理方式：' prop='resolveTube'>
                  <div v-if="mode === 'view'">{{ dataToView.resolveTube }}</div>
                  <Select v-else class='query-form-el' v-model="dataToView.resolveTubeId" label-in-value
                          @on-change="setResolveTube"
                          @on-clear="setResolveTube(null)">
                    <Option v-for="item in mineBlastList" :value="item.codingCodeId" :key="item.codingCodeId">
                      {{ item.codingName }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='承担爆破单位：' prop='blastOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.blastOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.blastOrg'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='安全生产许可证号：' prop='tubeLicenceNum'>
                  <div v-if="mode === 'view'">{{ dataToView.tubeLicenceNum }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.tubeLicenceNum'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='发证机关：' prop='tubeLicenceOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.tubeLicenceOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.tubeLicenceOrg'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='许可范围：' prop='tubeLicenceRange'>
                  <div v-if="mode === 'view'">{{ dataToView.tubeLicenceRange }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.tubeLicenceRange'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期起始时间：' prop='tubeLicenceDateStart'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.tubeLicenceDateStart) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期" style="width: 100%"
                              v-model='dataToView.tubeLicenceDateStart'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期截至时间：' prop='tubeLicenceDateEnd'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.tubeLicenceDateEnd) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.tubeLicenceDateEnd'></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='爆破作业许可证编号：' prop='tubeBizLicenceNum'>
                  <div v-if="mode === 'view'">{{ dataToView.tubeBizLicenceNum }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.tubeBizLicenceNum'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='发证机关：' prop='tubeBizLicenceOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.tubeBizLicenceOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.tubeBizLicenceOrg'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='爆破资质等级（从业范围）：' prop='tubeBizLicenceRange'>
                  <div v-if="mode === 'view'">{{ dataToView.tubeBizLicenceRange }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.tubeBizLicenceRange'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='有效期起始时间：' prop='tubeBizLicenceDateStart'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.tubeBizLicenceDateStart) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.tubeBizLicenceDateStart'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='有效期截至时间：' prop='tubeBizLicenceDateEnd'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.tubeBizLicenceDateEnd) }}</div>
                  <DatePicker v-else class='query-form-el' type="date" placeholder="请选择日期"
                              v-model='dataToView.tubeBizLicenceDateEnd'></DatePicker>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='安全现状评价情况：' prop='saAssess'>
                  <div v-if="mode === 'view'">{{ dataToView.saAssess }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.saAssess'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="7">
                <FormItem label='评价单位资质：' prop='qualifiedAssessOrg'>
                  <div v-if="mode === 'view'">{{ dataToView.qualifiedAssessOrg }}</div>
                  <Input v-else class='query-form-el' type='text' v-model='dataToView.qualifiedAssessOrg'></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='填表人：' prop='registrant'>
                  <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                  <Input v-else type='text' v-model='dataToView.registrant' readonly></Input>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label='填表时间：' prop='registTime'>
                  <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                  <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el"
                              v-model='dataToView.registTime' readonly></DatePicker>
                </FormItem>
              </Col>
              <Col span="7"></Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='备注：' prop='notes'>
                  <div v-if="mode === 'view'">{{ dataToView.notes }}</div>
                  <Input v-else class='query-form-el' type='textarea' v-model='dataToView.notes'></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {formatDate} from '@/tools/index'
import {mapState} from 'vuex'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import echarts from "echarts";

var cascaderDom = () => import('@/components/cascader-dom.vue');
export default {
  components: {
    cascaderDom
  },
  computed: {
    ...mapState('trhg', {
      areaMap: state => state.area.areaMap ? state.area.areaMap : [],
      areaTreeMap: state => state.area.areaTreeMap ? state.area.areaTreeMap : {},
    }),
  },
  data() {
    return {
      ...this.createCommonDataField(),
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        // { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100 },
        {key: 'companyName', title: '企业名称', align: 'center', width: 200},
        {key: 'companyAddress', title: '所在地', align: 'center', width: 150, render: this.renderCellArea},
        {key: 'mineLicenceNum', title: '采矿许可证编号', align: 'center', width: 150},
        {
          key: 'mineLicenceDateStart', title: '有效期', align: 'center', width: 150, render: (h, params) => {
            return h('span', (params.row.mineLicenceDateStart ? formatDate(new Date(params.row.mineLicenceDateStart), "yyyy-MM-dd") : "")
                + ' - '
                + (params.row.mineLicenceDateEnd ? formatDate(new Date(params.row.mineLicenceDateEnd), "yyyy-MM-dd") : ""));
          }
        },
        {key: 'saLicenceNum', title: '安全生产许可证编号', align: 'center', width: 150},
        {
          key: 'saLicenceDateStart', title: '有效期', align: 'center', width: 150, render: (h, params) => {
            return h('span', (params.row.saLicenceDateStart ? formatDate(new Date(params.row.saLicenceDateStart), "yyyy-MM-dd") : "")
                + ' - '
                + (params.row.saLicenceDateEnd ? formatDate(new Date(params.row.saLicenceDateEnd), "yyyy-MM-dd") : ""));
          }
        },
        {
          key: 'startDate',
          title: '投产日期',
          align: 'center',
          width: 150,
          render: this.renderCellDate,
          sortable: 'custom'
        },
        {key: 'mineDesignOrg', title: '矿山开采设计单位', align: 'center', width: 150},
        {key: 'saStandiadRank', title: '矿山安全标准化等级', align: 'center', width: 130},
        // { key:'saStandiadRankDate',title: '矿山安全标准化期限',  align: 'center', width: 150 },
        {key: 'mineArea', title: '矿区面积（平方公里）', align: 'center', width: 130},
        {key: 'reserves', title: '保有储量', align: 'center', width: 150},
        {key: 'mineTeamType', title: '开采队伍情况', align: 'center', width: 150},
        {key: 'contractor', title: '承接矿山作业单位', align: 'center', width: 150},
        {key: 'saLicenceCoNum', title: '安全生产许可证', align: 'center', width: 150},
        {key: 'saLicenceCoRange', title: '许可范围', align: 'center', width: 150},
        {key: 'saLicenceCoOrg', title: '发证机关', align: 'center', width: 150},
        {
          key: 'saLicenceCoDateStart', title: '有效期', align: 'center', width: 150, render: (h, params) => {
            return h('span', (params.row.saLicenceCoDateStart ? formatDate(new Date(params.row.saLicenceCoDateStart), "yyyy-MM-dd") : "")
                + ' - '
                + (params.row.saLicenceCoDateEnd ? formatDate(new Date(params.row.saLicenceCoDateEnd), "yyyy-MM-dd") : ""));
          }
        },
        {key: 'coBizRank', title: '承包单位作业资质等级', align: 'center', width: 150},
        {key: 'coBizOrg', title: '发证机关', align: 'center', width: 150},
        {
          key: 'coBizDateStart', title: '有效期', align: 'center', width: 150, render: function (h, params) {
            return h('span', (params.row.coBizDateStart ? formatDate(new Date(params.row.coBizDateStart), "yyyy-MM-dd") : "")
                + ' - '
                + (params.row.coBizDateEnd ? formatDate(new Date(params.row.coBizDateEnd), "yyyy-MM-dd") : ""));
          }
        },
        {key: 'yearMine', title: '年开采量（万吨）', align: 'center', width: 150},
        {key: 'storeSoil', title: '有无排土场、库存量（万吨）', align: 'center', width: 150},
        {key: 'storeSoilDoc', title: '有无排土场安全评价资料', align: 'center', width: 150},
        {key: 'resolveTube', title: '爆破管理方式', align: 'center', width: 150},
        // { key:'resolveTube',title: '爆破管理方式显示名',  align: 'center' , width: 150},
        {key: 'blastOrg', title: '承担爆破单位', align: 'center', width: 150},
        {key: 'tubeLicenceNum', title: '安全生产许可证号', align: 'center', width: 150},
        {key: 'tubeLicenceOrg', title: '发证机关', align: 'center', width: 150},
        {key: 'tubeLicenceRange', title: '许可范围', align: 'center', width: 150},
        {
          key: 'tubeLicenceDateStart', title: '有效期', align: 'center', width: 150, render: (h, params) => {
            return h('span', (params.row.tubeLicenceDateStart ? formatDate(new Date(params.row.tubeLicenceDateStart), "yyyy-MM-dd") : "")
                + ' - '
                + (params.row.tubeLicenceDateEnd ? formatDate(new Date(params.row.tubeLicenceDateEnd), "yyyy-MM-dd") : ""));
          }
        },
        {key: 'tubeBizLicenceNum', title: '爆破作业许可证编号', align: 'center', width: 150},
        {key: 'tubeBizLicenceOrg', title: '发证机关', align: 'center', width: 150},
        {key: 'tubeBizLicenceRange', title: '爆破资质等级（从业范围）', align: 'center', width: 150},
        {
          key: 'tubeBizLicenceDateStart', title: '有效期', align: 'center', width: 150, render: (h, params) => {
            return h('span', (params.row.tubeBizLicenceDateStart ? formatDate(new Date(params.row.tubeBizLicenceDateStart), "yyyy-MM-dd") : "")
                + ' - '
                + (params.row.tubeBizLicenceDateEnd ? formatDate(new Date(params.row.tubeBizLicenceDateEnd), "yyyy-MM-dd") : ""));
          }
        },
        {key: 'saAssess', title: '安全现状评价情况', align: 'center', width: 150},
        {key: 'qualifiedAssessOrg', title: '评价单位资质', align: 'center', width: 150},
        {
          key: 'createDate',
          title: '填表时间',
          align: 'left',
          width: 120,
          render: this.renderCellDate,
          sortable: 'custom'
        },
        {key: 'notes', title: '备注', align: 'center', width: 150, tooltip: true},
        this.getActionColumns(),
      ],
      ruleCustom: {
        // perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
        companyId: [{required: true, message: '请填写企业名称', trigger: 'change'}],
        companyAddress: [{required: true, message: '请填写所在地', trigger: 'change'}],
        // mineLicenceNum: [ { required: true, message: '请填写采矿许可证编号', trigger: 'change' } ],
        // mineLicenceDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
        // mineLicenceDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
        // saLicenceNum: [ { required: true, message: '请填写安全生产许可证编号', trigger: 'change' } ],
        // saLicenceDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
        // saLicenceDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
        // startDate: [ { required: true, message: '请填写投产日期', trigger: 'change' } ],
        // mineDesignOrg: [ { required: true, message: '请填写矿山开采设计单位', trigger: 'change' } ],
        // saStandiadRank: [ { required: true, message: '请填写矿山安全标准化等级）', trigger: 'change' } ],
        // saStandiadRankDate: [ { required: true, message: '请填写矿山安全标准化期限', trigger: 'change' } ],
        mineArea: [
          {
            pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/,
            message: '矿区面积（平方公里））必须为数字',
            trigger: 'change',
            type: 'number'
          }
        ],
        reserves: [
          {pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '保有储量必须为数字', trigger: 'change', type: 'number'}
        ],
        yearMine: [
          {
            pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/,
            message: '年开采量（万吨）必须为数字',
            trigger: 'change',
            type: 'number'
          }
        ],
        storeSoil: [
          {
            pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/,
            message: '排土场、库存量（万吨）必须为数字',
            trigger: 'change',
            type: 'number'
          }
        ],
        // reserves: [ { required: true, message: '请填写保有储量', trigger: 'change' } ],
        // mineTeamTypeId: [ { required: true, message: '请填写开采队伍情况Id', trigger: 'change' } ],
        // mineTeamType: [ { required: true, message: '请填写开采队伍情况显示', trigger: 'change' } ],
        // contractor: [ { required: true, message: '请填写承接矿山作业单位', trigger: 'change' } ],
        // saLicenceCoNum: [ { required: true, message: '请填写安全生产许可证', trigger: 'change' } ],
        // saLicenceCoRange: [ { required: true, message: '请填写许可范围', trigger: 'change' } ],
        // saLicenceCoOrg: [ { required: true, message: '请填写发证机关', trigger: 'change' } ],
        // saLicenceCoDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
        // saLicenceCoDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
        // coBizRank: [ { required: true, message: '请填写承包单位作业资质等级', trigger: 'change' } ],
        // coBizOrg: [ { required: true, message: '请填写发证机关', trigger: 'change' } ],
        // coBizDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
        // coBizDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
        // yearMine: [ { required: true, message: '请填写年开采量（万吨）', trigger: 'change' } ],
        // storeSoil: [ { required: true, message: '请填写有无排土场、库存量（万吨）', trigger: 'change' } ],
        // storeSoilDoc: [ { required: true, message: '请填写有无排土场安全评价资料', trigger: 'change' } ],
        // resolveTubeId: [ { required: true, message: '请填写爆破管理方式ID', trigger: 'change' } ],
        // resolveTube: [ { required: true, message: '请填写爆破管理方式显示名', trigger: 'change' } ],
        // blastOrg: [ { required: true, message: '请填写承担爆破单位', trigger: 'change' } ],
        // tubeLicenceNum: [ { required: true, message: '请填写安全生产许可证号', trigger: 'change' } ],
        // tubeLicenceOrg: [ { required: true, message: '请填写发证机关', trigger: 'change' } ],
        // tubeLicenceRange: [ { required: true, message: '请填写许可范围', trigger: 'change' } ],
        // tubeLicenceDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
        // tubeLicenceDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
        // tubeBizLicenceNum: [ { required: true, message: '请填写爆破作业许可证编号', trigger: 'change' } ],
        // tubeBizLicenceOrg: [ { required: true, message: '请填写发证机关', trigger: 'change' } ],
        // tubeBizLicenceRange: [ { required: true, message: '请填写爆破资质等级（从业范围）', trigger: 'change' } ],
        // tubeBizLicenceDateStart: [ { required: true, message: '请填写有效期起始时间', trigger: 'change' } ],
        // tubeBizLicenceDateEnd: [ { required: true, message: '请填写有效期截止时间', trigger: 'change' } ],
        // saAssess: [ { required: true, message: '请填写安全现状评价情况', trigger: 'change' } ],
        // qualifiedAssessOrg: [ { required: true, message: '请填写评价单位资质', trigger: 'change' } ],
        // notes: [ { required: true, message: '请填写备注', trigger: 'change' } ],
        // rptPeroid: [ { required: true, message: '请填写月份', trigger: 'change', type:'date' } ],
      },
      tableHeight: 10,
      // api
      queryUrl: Api.querySafeRptMine,
      exportUrl: Api.exportSafeRptMine,
      deleteUrl: Api.deleteSafeRptMine,
      bthDeleteUrl: Api.batchDeleteSafeRptMine,
      getUrl: Api.getSafeRptMine,
      updateUrl: Api.updateSafeRptMine,
      saveUrl: Api.saveSafeRptMine,
      //coding
      mineBlastList: [],
      mineTeamTypeList: [],
    }
  },
  async mounted() {
    this.divHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160;
    this.setTableHeight(205);
    this.pageStatus.baseLoading = true
    await this.$store.dispatch('trhg/area/query', {scope: this}, {root: true})
    this.pageStatus.baseLoading = false
    this.query();
    this.initCoding();
    this.tempAreaTree = this.areaTreeMap['0']
    this.$nextTick(() => {
      this.loadMineSafeRptStatistics();
    });
  },
  methods: {
    ...pageCommonFunction,
    rowClassName(row, index) {
      if (row.mineLicenceDateEnd) {
        let endDate = new Date(row.mineLicenceDateEnd);
        let currentDate = new Date();
        var days = parseInt((endDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24));
        if (days < 30) {
          console.log(days)
          return 'demo-table-error-row';
        }
      }
      return '';
    },
    loadMineSafeRptStatistics() {
      let passRateRecordContainer = echarts.init(this.$refs.container);
      this.$http.get(Api.statisticsByMineTeamType + "?companyName=" + this.currentUser.companyName).then(res => {
        if (res.data.status == 200) {
          let list = res.data.data
          let barOption = this.getOption()
          let xAxisData = [];
          let seriesData = [];
          list.forEach(item => {
            xAxisData.push(item.mineTeamType);
            seriesData.push(item.size);
          })
          barOption.title.text = "按照开采队伍情况统计"
          barOption.series[0].data = seriesData
          barOption.xAxis.data = xAxisData
          passRateRecordContainer.setOption(barOption);
        }
      });
      let passRateRecordContainer2 = echarts.init(this.$refs.container2);
      this.$http.get(Api.statisticsByStandiadRank + "?companyName=" + this.currentUser.companyName).then(res => {
        if (res.data.status == 200) {
          let list = res.data.data
          let barOption = this.getOption()
          let xAxisData = [];
          let seriesData = [];
          list.forEach(item => {
            xAxisData.push(item.saStandiadRank);
            seriesData.push(item.size);
          })
          barOption.title.text = "按照矿山安全标准化等级统计"
          barOption.series[0].data = seriesData
          barOption.xAxis.data = xAxisData
          passRateRecordContainer2.setOption(barOption);
        }
      });
    },
    queryListByMineTeamType() {
      let orgName = this.clickParam.name;
      this.loading = true;
      let data = {
        conditions: {orgName: orgName},
        startPage: this.statisticsPagedata.fromPage,
        size: this.statisticsPagedata.pageSize,
      }
      this.$http.get(Api.queryPassRateRecordsByTwoLevelIdStatistics, {params: data}).then(r => {
        this.statisticsInfo = r.data.data.data;
        this.statisticsPagedata.total = r.data.data.totalSize;
        this.loading = false;
      });
    },
    getOption() {
      let option = {
        title:{},
        tooltip: {//提示框组件，用于配置鼠标滑过或点击图表时的显示框。
          show: true, // 是否显示
          trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
          axisPointer: { // 坐标轴指示器配置项。
            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          },
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      return option;
    },
    createEmptyDataToAdd() {
      return {
        mineArea: '',
        reserves: '',
        yearMine: '',
        storeSoil: '',
        companyAddressArr: []
      }
    }
    ,
    beforeEditDialogOpen(data) {
      if (data.row.companyAddress) {
        data.row.companyAddressArr = data.row.companyAddress.split(',')
        data.row.companyAddressName = this.areaCodeToAreaName(data.row.companyAddress)
      }
    }
    ,
    async afterDataToViewInit(data) {
      if (data && data.companyAddress) {
        let companyAddressArr = data.companyAddress.split(',')
        this.tempAreaTree = []
        setTimeout(() => {
          this.tempAreaTree = this.addressEditArr(this.areaTreeMap, companyAddressArr)
        }, 100)
      }
    }
    ,
    initCoding() {
      this.getCodingSort("MINE-000001").then((res) => {
        this.mineBlastList = res.data.data;
      });
      this.getCodingSort("MINE-000002").then((res) => {
        this.mineTeamTypeList = res.data.data;
      });
    }
    ,
    setSaStandiadRank(data) {
      if (data) {
        this.dataToView.saStandiadRank = data.label;
      } else {
        this.dataToView.saStandiadRank = null;
      }
    }
    ,
    setResolveTube(data) {
      if (data) {
        this.dataToView.resolveTube = data.label;
      } else {
        this.dataToView.resolveTube = null;
      }
    },
    setMineTeamType(data) {
      if (data) {
        this.dataToView.mineTeamType = data.label;
      } else {
        this.dataToView.mineTeamType = null;
      }
    }
    ,
    deleteData(params) {
      this.deleteDateAjax(params);
    }
    ,
    query() {
      this.queryAjax();
    }
    ,
    submit(name) {
      this.$set(this.dataToView, 'companyAddress', this.dataToView.companyAddressArr.join(','))
      this.submitAjax(name);
    }
    ,
    querySort({column, key, order}) {
      this.pagedata.currentPage = 1;
      this.dataToQuery.order = order;
      this.dataToQuery.key = key;
      this.query()
    }
    ,
  },
  watch: {},
}
</script>

<style lang='css' scoped>
@import '../../../../index.css';

/deep/ .ivu-table .demo-table-error-row td {
  background-color: #fedede !important;
}

.rpt-form {
}

/deep/ .rpt-form .query-form-el {
  width: 100%;
}

/deep/ .rpt-form .ivu-table-wrapper {
  overflow: visible;
}

/deep/ .rpt-form .ivu-table-wrapper .ivu-table {
  overflow: visible;
}
</style>
